شرح دورة أساسيات TypeScript

TypeScript هي لغة برمجة مفتوحة المصدر طورتها Microsoft، وهي تعتبر امتدادًا لـ JavaScript مع إضافة ميزات مثل التنقيط الثابت (Static Typing) والبرمجة الكائنية (OOP) بشكل أقوى. TypeScript يتم تحويله إلى JavaScript حتى يعمل في المتصفحات وبيئات Node.js.

الدرس الأول: تثبيت TypeScript والبدء

شرح مفصل:
  • تثبيت TypeScript: يمكنك تثبيت TypeScript باستخدام npm عبر الأمر التالي:
    npm install -g typescript
  • إنشاء ملف TypeScript: قم بإنشاء ملف بامتداد `.ts`، على سبيل المثال `app.ts`.
  • ترجمة TypeScript إلى JavaScript: استخدم الأمر التالي لترجمة الملف:
    tsc app.ts

الدرس الثاني: الأنواع الأساسية في TypeScript

شرح مفصل:
  • عدد (Number): let age: number = 25;
  • نص (String): let name: string = "John";
  • منطقي (Boolean): let isActive: boolean = true;
  • مصفوفة (Array): let list: number[] = [1, 2, 3];
  • كائن (Object): let person: { name: string, age: number } = { name: "John", age: 25 };
مثال: let userName: string = "Alice"; let userAge: number = 30; let isStudent: boolean = false; console.log(`Name: ${userName}, Age: ${userAge}, Student: ${isStudent}`);

الدرس الثالث: الوظائف (Functions) في TypeScript

شرح مفصل:
  • وظائف عادية: يمكنك تحديد أنواع المعاملات ونوع القيمة المرجعة.
    function add(x: number, y: number): number { return x + y; } let result = add(5, 10); console.log(result); // Output: 15
  • وظائف السهم (Arrow Functions):
    const multiply = (x: number, y: number): number => x * y; console.log(multiply(3, 4)); // Output: 12

الدرس الرابع: الواجهات (Interfaces)

شرح مفصل:
  • تعريف الواجهات: تُستخدم لتعريف شكل الكائنات.
    interface Person { name: string; age: number; isStudent?: boolean; // Optional property } let user: Person = { name: "Alice", age: 25 }; console.log(user.name); // Output: Alice

الدرس الخامس: الفئات (Classes)

شرح مفصل:
  • تعريف الفئات: يدعم TypeScript البرمجة الكائنية بشكل كامل.
    class Animal { name: string; constructor(name: string) { this.name = name; } speak(): void { console.log(`${this.name} makes a noise.`); } } class Dog extends Animal { breed: string; constructor(name: string, breed: string) { super(name); this.breed = breed; } speak(): void { console.log(`${this.name} barks.`); } } let dog = new Dog("Buddy", "Golden Retriever"); dog.speak(); // Output: Buddy barks.

الدرس السادس: الأنواع العامة (Generics)

شرح مفصل:
  • تعريف الأنواع العامة: تسمح بإنشاء مكونات قابلة لإعادة الاستخدام.
    function identity(arg: T): T { return arg; } let output1 = identity("Hello"); let output2 = identity(42); console.log(output1); // Output: Hello console.log(output2); // Output: 42

الدرس السابع: الوحدات (Modules)

شرح مفصل:
  • استخدام الوحدات: لتقسيم الكود إلى ملفات متعددة.
    // math.ts export function add(x: number, y: number): number { return x + y; } // app.ts import { add } from './math'; let result = add(5, 10); console.log(result); // Output: 15

الدرس الثامن: الأدوات المتقدمة

شرح مفصل:
  • التقاط الأخطاء (Error Handling): استخدام `try-catch` للتعامل مع الأخطاء.
  • الأنواع المتقدمة (Advanced Types): مثل `Union Types`, `Intersection Types`, و `Type Guards`.
  • التفاعل مع مكتبات JavaScript: استخدام ملفات تعريف النوع (`.d.ts`).

الدرس التاسع: أفضل الممارسات

شرح مفصل:
  • استخدام التنقيط الثابت: يساعد في اكتشاف الأخطاء مبكرًا.
  • التوثيق (Documentation): استخدام التعليقات والواجهات لتوثيق الكود.
  • اختبار الكود: استخدام أدوات مثل Jest لاختبار كود TypeScript.

الدرس العاشر: مشروع عملي

شرح مفصل:
  • بناء تطبيق To-Do List باستخدام TypeScript:
    1. إنشاء واجهة مستخدم بسيطة.
    2. إضافة وظائف لإضافة وحذف المهام.
    3. استخدام TypeScript لضمان سلامة الأنواع.